<template>
  <div class="container">
    <div class="left">
      <h3 class="title">
        前期测绘详细信息
      </h3>
      <div class="detailMsg" v-if="supervice">
        <div class="msgItem"><span class="tit">前期测绘时间：</span> <span class="msg" >{{supervice.time}}</span></div>
        <div class="msgItem"><span class="tit">测绘公司：</span> <span class="msg">{{supervice.companyName}}</span></div>
        <div class="listItem head">
          <div class="btn" @click="handleTab(0)" :class="listShowFlag === 0 ? 'active': ''">全部</div>
          <div class="btn" @click="handleTab(1)" :class="listShowFlag === 1 ? 'active': ''">图片</div>
          <div class="btn" @click="handleTab(2)" :class="listShowFlag === 2 ? 'active': ''">视频</div>
          <div class="btn" @click="handleTab(3)" :class="listShowFlag === 3 ? 'active': ''">文字</div>
        </div>
        <div class="listItem" v-show="showItems(1)">
          <span class="item" >路孔镇尚书村一组1现场照片</span> <span class="viewDetail">查看</span>
        </div>
        <div class="listItem" v-show="showItems(2)">
          <span class="item">路孔镇尚书村一组文字记录</span> <span class="viewDetail">查看</span>
        </div>
        <div class="listItem" v-show="showItems(1)">
          <span class="item" >路孔镇尚书村一组1现场照片3</span> <span class="viewDetail">查看</span>
        </div>
        <div class="listItem" v-show="showItems(3)">
          <span class="item">路孔镇尚书村一组视频</span> <span class="viewDetail">查看</span>
        </div>
      </div>
    </div>
    <div class="right">
      <h3 class="title">
        前期测绘位置及轨迹信息
      </h3>
      <div class="rContent">

      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data () {
            return {
                listShowFlag: 0,
                supervice: ''
            }
        },
        created() {
            console.log(this.$route.params.supervice)
            this.supervice = this.$route.params.supervice
        },
        methods: {
            handleTab (index) {
                this.listShowFlag = index
            },
            showItems(type) {
                const flag = Number.parseInt(type)
                return this.listShowFlag === flag || this.listShowFlag === 0
            }
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    padding: 10px 0 0 100px;
    margin-top: 20px;
    z-index: 2;
    .title {
      margin: 0 0 20px;
      font-size: 18px;
      font-weight: bold;
      color: #4D4D4D;
    }
    .left{
      width: 470px;
      min-width: 455px;
      .detailMsg {
        padding: 30px 0 30px 30px;
        box-sizing: border-box;
        border: 1px solid #EBEDF2;
        min-height: 490px;
        margin-right: 120px;
        .msgItem {
          margin-bottom: 10px;
          font-size: 14px;
          .tit{
            color: #4D4D4D;
          }
          .msg{
            color: #A6A6A6;
          }
        }
        .listItem {
          width: 100%;
          height: 56px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 30px;
          &.head {
            margin-top: 20px;
            justify-content: left;
            border-top: 1px solid #EBEEF5;
            .btn{
              display: inline-block;
              padding: 0 16px;
              font-size: 14px;
              color: #696969;
              background: #F0F3F5;
              height: 28px;
              line-height: 28px;
              margin-right: 8px;
              cursor: pointer;
              &.active {
                background: #409EFF;
                color: #fff;
              }
            }
          }
          .item {
            font-size: 14px;
            color: #606266
          }
          .viewDetail {
            font-size: 14px;
            color: #409EFF;
            cursor: pointer;
          }
        }
      }
    }
    .right{
      .rContent {
        width: 680px;
        height: 490px;
        background: #8C8E79;
      }
    }
  }
</style>
